import React, { Component } from 'react';
import "../../styles/home/GoodsList.scss";
import { withRouter } from 'react-router-dom'

import { index_goodlist } from '../../api/index';

class GoodsList extends Component {
    constructor(props) {
        super(props);
        //初始化组件状态(数据)
        this.state = {
            obj: { title: 'vue react' },
            list: []
        }
    }
    componentDidMount() {
        console.log('componentDidMount');
        //一般在这个方法中 发送ajax请求, 创建定时器, 监听事件
        index_goodlist().then((res) => {
            console.log(res.data);
            this.setState({ bannerlist: res.data.list });
            // eslint-disable-next-line react/no-direct-mutation-state
            this.state.list = res.data.list
        })
    }
    toDetail(id) {
        this.props.history.push('/details/' + id);
    }
    render() {
        return (
            <div className='GoodsList'>
                {/*列表*/}
                {
                    this.state.list.map((item, index) => {
                        return (
                            <div className='item' key={index} onClick={() => { this.toDetail(item.id) }}>
                                <img src={item.pic} alt="" />
                                <div className='nameBox'>
                                    <div className='name'>{item.name}</div>
                                    <div className='oldPrice'>
                                        <span>{item.activityTags[0]}</span>
                                        <span>{item.activityTags[1]}</span>
                                        <span>{item.activityTags[2]}</span>
                                    </div>
                                    <div className='newPrice'>{item.salesPrice.name}￥<span className='price'>{item.salesPrice.value}</span></div>
                                </div>
                            </div>
                        )
                    })
                }
                {
                    //如果列表为空
                    this.state.list.length === 0 &&
                    <div className="empty">网络异常,请尝试刷新页面!</div>
                }
            </div>
        );
    }
}

export default withRouter(GoodsList);